<template>
  <div class="main">
    <div class="header">
      <div class="headerItem1">
        <div class="headerItem1Block"></div>
        <div class="headerItem1Text">体检套餐管理</div>
      </div>
      <div class="headerItem2">
        <el-button type="primary" plain @click="details2">删除</el-button>
        <el-button type="primary" @click="medicalPlanAdd"
          >新增套餐信息</el-button
        >
      </div>
    </div>
    <div class="section">
      <div class="sectionBtn">
        <el-button
          v-for="item in btnactive"
          :class="{ active: item.type }"
          @click="btnGaib(item)"
          link
        >
          {{ item.name }}
        </el-button>
      </div>
      <div class="sectionForm">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-select
              v-model="formInline.typeName"
              placeholder="请选择套餐类型"
            >
              <el-option
                v-for="item in type"
                :label="item.typeName"
                :value="item.typeName"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="formInline.packageName"
              placeholder="请输入套餐名称"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="sectionTable">
        <el-table
          ref="multipleTableRef"
          :data="nowData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column property="packageID" label="套餐ID" />
          <el-table-column property="packageName" label="套餐名称" />
          <el-table-column property="packageImage" label="套餐图片">
            <template #default="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="'http://localhost:3000/uploads/' + scope.row.packageImage"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column property="typeName" label="套餐类型" />
          <el-table-column property="packagePrice" label="套餐价格（元）" />
          <el-table-column
            property="projectName"
            label="套餐项目"
            width="250"
          />
          <el-table-column property="packageStatus" label="套餐状态">
            <template #default="scope">
              <el-switch
                v-model="scope.row.packageStatus"
                active-text="使用中"
                inactive-text="未使用"
                active-value="true"
                inactive-value="false"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-icon color="#006eff" :size="23" @click="details(scope.row)"
                ><DeleteFilled
              /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <page
        :count="count"
        @changePage="changePage"
        class="sectionFooter"
      ></page>
    </div>
  </div>

  <!-- 删除弹框 -->
  <el-dialog v-model="centerDialogVisible" width="25%" center>
    <div class="tiShi">
      <div>
        <el-icon color="#006EFF" :size="50"><WarningFilled /></el-icon>
      </div>
      <div class="tiShiText1">删除确认</div>
      <div class="tiShiText2">删除后无法恢复，确定要删除此条信息吗？</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="del">确定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 删除弹框2 -->
  <el-dialog v-model="centerDialogVisible2" width="25%" center>
    <div class="tiShi">
      <div>
        <el-icon color="#006EFF" :size="50"><WarningFilled /></el-icon>
      </div>
      <div class="tiShiText1">删除确认</div>
      <div class="tiShiText2">删除后无法恢复，确定要删除此条信息吗？</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="delAllMedicalPlan2">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRouter } from "vue-router";
import {
  getMedicalPlan,
  delMedicalPlan,
  delAllMedicalPlan,
} from "../../utils/api/tiJian";
import page from "../../components/appointmentExamination/yema.vue";
export default {
  props: {},
  components: { page },
  setup() {
    const data = reactive({
      btnactive: [
        {
          id: 1,
          name: "体检套餐",
          type: true,
        },
        {
          id: 2,
          name: "体检项目",
          type: false,
        },
        {
          id: 3,
          name: "套餐类型",
          type: false,
        },
      ],
      formInline: {
        typeName: "",
        packageName: "",
      },
      tableData: [],
      centerDialogVisible: false,
      centerDialogVisible2: false,
      type: [],
      count: null,
      nowPage: 1,
      multipleSelection2: [],
    });
    let id;
    const nowData = computed(() => {
      let qiShi = (data.nowPage - 1) * 3;
      return data.tableData.slice(qiShi, qiShi + 3);
    });
    const changePage = (page) => {
      data.nowPage = page;
    };
    const router = useRouter();
    const btnGaib = (obj) => {
      data.btnactive.forEach((item) => {
        if (item.name == obj.name) {
          item.type = true;
          if (obj.name == "体检项目") {
            router.push({
              path: "/home/hospitalInfoManage/physicalExaminationProject",
            });
          } else if (obj.name == "套餐类型") {
            router.push({
              path: "/home/hospitalInfoManage/packageType",
            });
          }
        } else {
          item.type = false;
        }
      });
    };

    const details = (scope) => {
      // console.log(scope);
      id = scope.medicalID;
      data.centerDialogVisible = true;
    };
    const details2 = () => {
      data.centerDialogVisible2 = true;
    };
    const medicalPlanAdd = () => {
      router.push({
        path: "/home/hospitalInfoManage/medicalPlanAdd",
      });
    };

    const getMedicalAll = () => {
      getMedicalPlan().then((data2) => {
        // console.log(data2);
        data.tableData = []; //为了解决重复渲染
        if (data2.data.code == 200) {
          let arr = [];
          let arr2 = [];
          data2.data.data.forEach((item) => {
            if (arr.indexOf(item.packageName) == -1) {
              arr.push(item.packageName);
              data.tableData.push(item);
              data.tableData.forEach((item2) => {
                if (arr2.indexOf(item2.typeName) == -1) {
                  arr2.push(item2.typeName);
                  data.type.push(item2);
                }
              });
            } else {
              data.tableData[
                arr.indexOf(item.packageName)
              ].projectName += `,${item.projectName}`;
            }
          });
          // console.log(data.tableData.length);
          data.count = data.tableData.length;
          // console.log(data.type);
        }
      });
    };
    getMedicalAll();

    const del = () => {
      delMedicalPlan(id).then((dataM) => {
        // console.log(dataM);
        if (dataM.data.code == 200) {
          getMedicalAll();
          data.centerDialogVisible = false;
        }
      });
    };
    const onSubmit = () => {
      getMedicalPlan(data.formInline).then((search) => {
        console.log(search);
        if (search.data.code == 200) {
          data.tableData = search.data.data;
          data.count = data.tableData.length;
        }
      });
    };

    //这里是被选中的表格数据为数组
    const handleSelectionChange = (val) => {
      // data.multipleSelection2 = val;
      for (let i = 0; i < val.length; i++) {
        data.multipleSelection2[i] = val[i].medical_id;
      }
      console.log(val, 333);
      console.log(data.multipleSelection2, "llll");
    };

    const delAllMedicalPlan2 = () => {
      delAllMedicalPlan(data.multipleSelection2).then((dataA) => {
        console.log(dataA);
        if (dataA.data.code == 200) {
          getMedicalAll();
          data.centerDialogVisible2 = false;
        }
      });
    };
    return {
      ...toRefs(data),
      btnGaib,
      details,
      details2,
      medicalPlanAdd,
      changePage,
      nowData,
      del,
      onSubmit,
      handleSelectionChange,
      delAllMedicalPlan2,
    };
  },
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .headerItem1 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .headerItem1Block {
      width: 50px;
      height: 13px;
      background-color: #006eff;
      border-radius: 20px;
    }
    .headerItem1Text {
      font-size: 30px;
      margin-left: 20px;
    }
  }
  .headerItem2 {
    .el-button {
      padding: 20px;
      box-sizing: border-box;
      font-size: 18px;
    }
  }
}
.section {
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
  box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
  margin-top: 20px;
  .sectionBtn {
    padding: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(194, 188, 188, 0.486);
    .el-button {
      font-size: 18px;
    }
    .el-button:hover {
      color: #006eff;
    }
  }
  .sectionForm {
    padding: 20px 0;
    box-sizing: border-box;
    .el-input {
      width: 300px;
    }
  }
  .sectionFooter {
    padding: 30px;
    box-sizing: border-box;
    margin-top: 20px;
  }
}
.active {
  color: #006eff;
}
.tiShi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .tiShiText1 {
    font-size: 20px;
    padding: 20px;
    box-sizing: border-box;
  }
  .tiShiText2 {
    color: #c5c5c5;
  }
}
</style>